<template>
  <div class="page-main">
    <page-title>计划员合并策略维护</page-title>
    <split :no-left="false">
      <template #split-left>
        <div style="padding-right: 24px">
          <div style="margin: 16px 0">计划员</div>
          <a-input
            v-model="searchValue"
            readonly
            disabled
            style="width: 100%; margin-bottom: 8px"
            ><template #suffix> <icon-user /> </template
          ></a-input>
          <a-tree
            v-model:selected-keys="selectedKeys"
            :data="materialType"
            :field-names="{
              key: 'value',
              title: 'label',
            }"
            @select="selecTreeNode"
          />
        </div>
      </template>
      <template #split-right>
        <a-spin :loading="loading" style="width: 100%">
          <Content
            v-if="componentKey"
            ref="conRef"
            :key="componentKey"
            :is-show="isShow"
          />
        </a-spin>
      </template>
    </split>
    <Footer
      :permission-flag="'procurement:require-option:planner-save'"
      @saveData="saveData"
    />
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import {
    getOptionByUserId,
    saveOptionPlanner,
  } from '@/api/balance-management/maintenance';
  import { Message } from '@arco-design/web-vue';
  import { useUserStore } from '@/store';
  import pageTitle from '@/common/components/title/page-title.vue';
  import { materialType } from '@/config/const';
  import split from '@/common/components/split/index.vue';
  import Content from './component/content.vue';
  import Footer from './component/footer.vue';

  const userStore = useUserStore();
  const searchValue = ref();
  const loading = ref(false);
  // const size = ref('0.15');
  const isShow = ref(true);
  const conRef = ref();
  const componentKey = ref(1);
  // const roles = computed(() => userStore.userCode);
  searchValue.value = userStore.$state.username;
  console.log(`output->userStore`, userStore.$state.username);
  const selectedKeys = ref(['2']);
  const getOption = async () => {
    try {
      loading.value = true;
      const { data } = await getOptionByUserId({
        materialType: selectedKeys.value[0],
      });

      conRef.value.init(data, selectedKeys.value[0]);
    } catch (error) {
      Message.warning({
        content: error,
      });
    } finally {
      loading.value = false;
    }
  };

  const saveData = async () => {
    try {
      loading.value = true;
      const { data } = await saveOptionPlanner({
        ...conRef.value.formCon,
        materialType: selectedKeys.value[0],
      });
      if (data) {
        Message.success('保存成功');
      }
    } catch (error) {
      Message.warning({
        content: error,
      });
    } finally {
      loading.value = false;
    }
  };
  const selecTreeNode = (selected) => {
    selectedKeys.value = selected;
    getOption();
    componentKey.value += 1;
  };
  onMounted(() => {
    getOption();
  });
</script>

<style lang="less" scoped>
  .IconCare {
    width: 10px;
    height: 10px;
    border-bottom: 2px solid #ccc;
  }
  .l {
    border-left: 2px solid #ccc;
    transform: rotateZ(-135deg);
  }
  .r {
    border-right: 2px solid #ccc;
    transform: rotateZ(135deg);
  }
  /deep/ .arco-tree-node-selected {
    color: #1e2228;
    background: #ebf4ff;
  }

  /deep/ .arco-tree-node {
    width: 100%;
    margin: 10px 0;
    color: #1e2228 !important;
  }

  /deep/ .arco-tree-node-title {
    width: 100%;
  }
  .layout-demo {
    height: calc(100vh - 290px);
  }
  .layout-demo :deep(.arco-layout-content) {
    color: var(--color-text-2);
    font-weight: 400;
    font-size: 14px;
  }
  .layout-demo :deep(.arco-layout-content) {
    display: flex;
    flex-direction: column;
    font-size: 16px;
    font-stretch: condensed;
    text-align: center;
  }
</style>
